#main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
}

.big-header {
  contain: strict;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  z-index: 12;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 3rem;
  max-height: 3rem;
  background: -webkit-linear-gradient(left, orange, orangered);
  background: linear-gradient(to right, orange, orangered);
}

.pub_foot {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 2rem;
  max-height: 2rem;
  background: -webkit-linear-gradient(left, orange, orangered);
  background: linear-gradient(to right, orange, orangered);
}

.pub_foot_sub {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 2rem;
  max-height: 2rem;
  background: #E4ECF4;
}

.pub_main {
  margin: 0;
  width: 100%;

  .title {
    padding: .5rem;
    margin: 0;
  }
  .main_center {
    width: 100%;
    background: white;
    height: 12rem;
    align-items: center;
    text-align: center;
    span {
      position: relative;
      top: 5rem;
      color: #524848;
    }

  }

  .canlender {
    width: 90%;
    height: 50%;
    position: fixed;
    top: 20%;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 1rem;
    background-color: white;
    text-align: center;
    box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, .3);
    padding: .5rem;

    .title {
      padding: 0;
      .center {
        position: relative;
        top: 20%;
        span {
          font-size: medium;
          font-weight: bold;
        }
      }
    }
    .month {
      width: 100%;
      height: 80%;
      div {
        &:not(:first-of-type) {
          margin-top: .5rem;
        }
        height: 18%;
        width: 100%;
        div {
          display: inline-flex;
          width: 20%;
          margin-left: 3%;
          margin-right: 3%;
          border: 1px solid #d5d5d9;
          height: 100%;
          border-radius: 15%;
          justify-content: center;
          align-items: center;
          span {
            font-size: small;
            font-weight: bold;
          }
        }

        .hight {
          background-color: #ffa115;
          border-color: #ffa115;
          span {
            color: white;
          }
        }
      }
    }
  }

  .textarea_body {
    width: 100%;
    height: 12rem;
    background: #efeff4;
    text-align: center;
    .textarea {
      font-size: small;
      font-weight: bold;
      letter-spacing: 1px;
      text-align: center;
    }
    .textarea_big {
      width: 90%;
      height: 95%;
      border: none;
      margin-top: 5%;
      border-radius: 5px;
    }
    span {
      font-size: smaller;
      font-weight: bold;
      position: relative;
      top: -1rem;
      color: #6d6d72;
    }
    .warn {
      margin-top: 2rem;
      text-align: center;
      color: #ff5306;
      font-size: small;
      font-weight: bold;
    }
  }

  .introduce {

    width: 100%;

    .bigcell {
      min-height: 3.5rem;
      max-height: 3.5rem;
      border-bottom: 1px solid lightgray;
      background: white;
      font-family: "Microsoft YaHei";
      text-align: left;
      .smallSpan {
        text-align: left;
        font-size: x-small;
        letter-spacing: 1px;
        margin-top: 5px;
        font-weight: bold;
        color: #6d6d72;
      }
      .bigSpan {
        text-align: left;
        letter-spacing: 1px;
        font-size: smaller;
        font-weight: bolder;

      }
      .rightSpan {
        float: right;
        font-size: xx-small;
        font-weight: bolder;
        position: relative;
        top: 10px;
        color: #6d6d72;
      }
    }
    .warncell {
      min-height: 3.5rem;
      max-height: 3.5rem;
      border: none;
      background: #efeff4;
      text-align: center;
      span {
        text-align: center;
        color: #ff5306;
        font-size: small;
        font-weight: bold;
      }
    }

  }

  .mui-content {
    background: #EFEFF4;
    .marrow {
      background: #EFEFF4;
      .basicCell {
        background: white;
        height: 2.5rem;
        .bigSpan {
          position: absolute;
          top: 30%;
          font-size: medium;
          font-weight: bold;
        }
        .span_right {
          position: absolute;
          right: 2rem;
          input {
            width: 5rem;
            border: none;
            text-align: right;
            font-size: small;
          }
        }

        .span_small {
          font-weight: bold;
          font-size: small;
          color: #929292;

        }
        .span_xsmall {
          font-size: x-small;
          position: absolute;
          right: 1rem;
          top: 30%;
        }
        .bedspan_l {
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          left: 10px;

        }
        .bedspan_m {
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          left: 40%;

        }
        .bedspan_r {
          font-size: smaller;
          font-weight: bolder;
          color: #6d6d72;
          position: absolute;
          right: 10px;

        }
      }

      .cirli {
        text-align: center;
        border-radius: 1.5rem;
        width: 90%;
        margin: 0.5rem 0 0.5rem 0;
        height: 90%;
        position: relative;
        left: 5%;
        border: none;
        box-shadow: 2px 2px 3px #6d6d72;
      }
      .nonebed {
        font-size: smaller;
        font-weight: bold;
        color: #8f8f94
      }

      .infraCell {
        background: white;
        height: 2rem;
        .span_left {
          position: absolute;
          top: 20%;
          font-size: small;
          font-weight: bolder;
          input {
            border: none;
          }
        }
        .se_span {
          font-size: x-small;
          font-weight: bold;
        }
        .bigfont {
          font-size: medium;
        }
        .little {
          font-size: xx-small;
          color: darkgrey;
        }
        .span_medio {
          position: absolute;
          top: 20%;
          margin-left: 3rem;
          font-size: small;
          font-weight: bolder;
          input {
            border: none;
            width: 5rem;
            height: 1rem;
            font-size: x-small;
          }
        }
        .span_right {
          position: absolute;
          top: 20%;
          right: 1rem;
          font-size: small;
          font-weight: bolder;
          color: #656565;
          span {
            width: 4rem;
            text-align: right;
          }
          input {
            border: none;
            width: 6rem;
            height: 1rem;
            font-size: small;
            text-align: right;
          }
        }
        .top20 {
          top: 15%;
        }
        .top40 {
          top: 40%;
          font-size: xx-small;
          color: darkgrey;
        }
        .lit_grey {
          font-size: xx-small;
          color: darkgrey;
        }
        .top60 {
          top: 70%;
          font-size: medium;
          color: orange;
        }
        .orange {
          color: #ff9115;
        }
        .bigright {
          top: 35%;
          font-size: .8rem;
        }
        .span_width {
          width: 5rem;
          text-align: right;
        }
        .samll {
          font-size: small
        }
        .infra_check {
          width: 16px;
          height: 16px;
        }

      }

      .settlecell {
        height: 4rem;

      }
      .groupCell {
        height: 2rem;
        font-size: larger;
        font-weight: bold;
        margin: 0;
        color: #929292;
        .small {
          font-size: x-small;
        }
      }

      .center {
        text-align: center;
      }
      .textcell {
        width: 90%;
        text-align: center;
        position: absolute;
        left: 5%;
        .bigspan {
          font-size: medium;
          font-weight: bold;
          margin: 1rem 0 1rem 0;
        }
        .smallspan {
          font-size: xx-small;
          color: #8f8f94;
          font-weight: bold;
        }
      }
      .small {
        font-size: medium;
      }
      .big {
        height: 3rem;
      }
    }
    .marrow {
      margin-bottom: 2rem;
    }
    .margin_0 {
      margin-bottom: 0;
    }
    .rem1_margin {
      margin-bottom: 1rem;
    }
    .diulei {
      .mui-collapse {
        div {
          text-align: center;
          p {
            margin: 0rem;
            padding: 0rem;
            font-size: xx-small;
            font-weight: bold;
            height: 1.5rem;
            width: 100%;
            border-radius: 5px;
            position: relative;
            color: black;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            span {
              width: 20%;
            }
            /* .span_0 {
              position: absolute;
              left: 10px;
            }
            .span_40 {
              position: absolute;
              left: 27%;
            }
            .span_45 {
              position: absolute;
              left: 47%;
            }
            .span_65 {
              position: absolute;
              left: 67%;
            }
            .span_100 {
              position: absolute;
              right: 10px;
            } */
          }
          .pwhite {
            background-color: white;

          }
        }
        a {
          font-size: small;
          font-weight: bold;
        }
      }
    }
    .center {
      text-align: center;
    }
  }

  .main_body {
    width: 100%;
    background: white;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    .content {
      position: relative;
      left: 0;
      top: 3rem;;
      width: 100%;
      border-top: 1rem solid #EFEFF4;
      .bigcell {
        min-height: 3.5rem;
        max-height: 3.5rem;
        border-bottom: 1px solid lightgray;
        background: white;
        font-family: "Microsoft YaHei";
        text-align: left;
        .smallSpan {
          text-align: left;
          font-size: x-small;
          letter-spacing: 1px;
          margin-top: 5px;
          font-weight: bold;
        }
        .bigSpan {
          text-align: left;
          letter-spacing: 1px;
          font-weight: bolder;
        }
        .rightSpan {
          float: right;
          font-size: xx-small;
          font-weight: bolder;
          position: relative;
          top: 10px;
        }
      }

    }
    .top_1rem {
      top: 1rem;
    }
    .bk_content {
      position: relative;
      left: 0;
      top: 3rem;;
      width: 100%;
      border-top: 1rem solid #efeff4;
      height: 5rem;
      background: rgba(239, 239, 244, 0.22);
      span {
        font-weight: bold;
        font-size: smaller;
      }
      .orange {
        color: orange;
      }
      .spanCheck {
        width: 12px;
        height: 12px;
        border: 2px solid grey;

      }
    }

  }

  .title_type1 {
    position: absolute;
    left: 20px;
    top: 1rem;;
    width: 80%;
    font-size: larger;
  }
  .title_type2 {
    .title_span {
      position: relative;
      left: 30px;
    }
    position: absolute;
    left: 0;
    top: 12rem;;
    width: 100%;
    font-size: larger;
    overflow: hidden;
    .house_varity {
      margin-top: 20px;
      width: 100rem;
      background: white;
      min-height: 2.5rem;
      max-height: 2.5rem;
      input {
        border: none;
      }
    }
  }
  .content {
    position: absolute;
    left: 0;
    top: 3rem;;
    width: 100%;
    .mui-table-view-cell {

      min-height: 3.5rem;
      max-height: 3.5rem;
      font-family: "Microsoft YaHei";
      border-bottom: 1px solid lightgray;
      background: white;
      .small {
        font-size: small;
        letter-spacing: 1px;
        margin-top: 10px;
        font-weight: bold;
        color: #868080
      }
      .big {
        font-size: large;
        letter-spacing: 4px;
        font-weight: bolder
      }
      .cell-radio {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(82, 72, 72, 0.97);
        border-radius: 10px;
        position: relative;
        top: 10px;
        float: right;

      }
    }
  }

  .main_map {
    width: 100%;
    background: whitesmoke;
    height: 13rem;
  }

  .pub_location {

    .pub_location_title {
      width: 80%;
      height: 1.5rem;
      background: #efeff4;
      margin: 5px 0 5px 20px;
    }
    .location_content {
      background-color: white;
      .mui-content {
        background-color: white;
        .mui-row {
          .mui-table-view-cell {
            min-height: 2.5rem;
            max-height: 2.5rem;
            font-family: "Microsoft YaHei" ! important;
            .location_input {
              border: none;
              font-weight: bolder;
              width: 80%;
            }
            .halfinput {
              width: 45%;
            }
            input::-webkit-input-placeholder {
              color: #ababab;
              opacity: 1;
            }
          }
        }
      }
    }
    .span_label {
      margin: 10px 0 10px 30px;
      font-weight: bold;
      font-size: smaller;
    }
  }

  .addimg-big {
    overflow: hidden;
    width: 100%;
    background: whitesmoke;
    height: 13rem;
    text-align: center;
    .title {
      margin-top: 3rem;
      color: #929292;
    }
    .button_div {
      color: #221d32;
      width: 100%;
      span {

        font-size: small;
        height: 1.5rem;
      }

      position: fixed;
      top: 13rem;
      input {
        border: none;
        font-size: small;
        font-weight: bold;
        width: 80%;
        height: 1.5rem;
      }
    }
    .addimg_shu {
      width: 100%;
      height: 100%;
      transition: 800ms;
    }

    .addimg_heng {
      width: 100%;
      height: 100%;
      transition: 800ms;
    }

  }

  .addimg-sma {
    width: 100%;
    height: auto;

    .addimg_div {
      width: 3rem;
      height: 3rem;
      background: white;
      //border: 1px solid #ff9913;
      margin: 0.5rem;
      border-radius: 2px;
      text-align: center;
      font-size: larger;
      float: left;

      span {
        margin-top: 1rem;
      }
    }
    img {
      width: 3rem;
      height: 3rem;
      margin: 0.5rem;;
      border-radius: 2px;
    }

  }

  .addimg-rule {
    float: none;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    .orange {
      color: orange;
      font-size: small;
      font-weight: bolder;
    }
  }

  .bounce_mask {
    background: white;
    width: 80%;
    height: 80%;
    position: fixed;
    top: 10%;
    left: 10%;
    border-radius: 20px;

    .mask_top {
      width: 100%;
      height: 85%;
      margin-top: 20px;
      h2 {
        font-size: larger;
        text-align: center;
      }
      .red {
        font-size: xx-small;
        color: red;
      }
      p {
        margin: 5px 20px 5px 20px;
        color: #4c4c51;
        font-size: small;
        font-weight: bold;
      }
    }
    .mask_bottom {
      width: 90%;
      height: 10%;
      position: absolute;
      left: 5%;
      border-top: 1px solid orange;
      text-align: center;
      span {
        color: orange;
        margin-top: 1rem;

      }
    }

  }

  .mui-slider {
    .mui-slider-group {
      .mui-slider-item {
        .sliderBody {
          height: 15rem;
          width: 100%;
          text-align: center;
          .sliderTitle {
            margin: 2.5rem 0 1rem 0;
            font-size: x-large;
          }
          .sliderSmall {
            font-size: smaller;
            font-weight: bold;
            margin-bottom: 2rem;
            letter-spacing: 1px;
          }
          .sliderSmaller {
            font-size: smaller;
            color: #929292;
            font-weight: bold;
            letter-spacing: 2px;
          }
          .sliderpoint {
            span {
              width: 12px;
              height: 12px;
              background: grey;
              border-radius: 6px;
              margin: 2rem 1rem 0 1rem;
            }
            .orange {
              background: orange;
            }
            .toimgbtn {
              margin-top: 2rem;
              width: 3rem;
            }
          }
        }
      }
    }
  }
}

.pub_5rem {
}

.title1 {
  margin-top: 3rem;
}

.close-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  span {
    @size: 1.6rem;
    min-height: @size;
    max-height: @size;
    min-width: @size;
    max-width: @size;
    padding: 5px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .6);
    .icon {
      font-size: .7rem;
    }
  }
}

.title-shou_ru {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.big-title {
  color: orange;
  font-size: 16px;
}

.mui-content > .mui-table-view:first-child {
  margin-top: 0;
}

.detail-group {
  background-color: #f7f7fc;

  .detail-item {
    position: relative;
    background-color: white;
    padding: .5rem 0;

    > div {
      span {
        font-size: 13px;
      }
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px;
    }
  }
  .item-date {
    margin-bottom: 10px;
    font-size: 15px;
  }
}